<html>

<head>
	<meta charset="utf-8">
	<title>咨询首页</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_404812_5ylqhr7dqsg1ra4i.css" type="text/css" media="all">
	<link rel="stylesheet" type="text/css" href="css/weui/jquery-weui.css">
	<link rel="stylesheet" type="text/css" href="css/weui/weui.min.css">
	<link rel="stylesheet" href="layui/css/layui.css" media="all">
	<link rel="stylesheet" type="text/css" href="css/style1.css">

	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
	<script type="text/javascript" src="js/weui/jquery-weui.js"></script>
	<script src="js/weui/city-picker.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<script type="text/javascript" src="layui/layui.js"></script>
	
	<script>
		var num =6;
		var stmp = 6;
		var AllPage = null; 

	</script>

</head>

<body onscroll="v.scrolltop=document.body.scrollTop;">
	
	
	<div id="id945" class="id945">
		<div class='a1'>
			<div class='b1 weui-span' id="home-city">城市</div>

			<div class='b2'><i class='c1 search_img'></i>
				<input type="text" placeholder="搜索" v-model="search" class='c2 ' id="search"></input>
			</div><i class='b3 layui-icon'>&#xe65f;</i></div>
			<div class='a2' id="a2">
				<div class='b1'>
					<img style="height: 200px;" v-if="bni === k" v-for="(x,k) in bn"
					v-bind:src="'http://192.168.1.125/shiro///imgs/'+x.imgPath" class='c1' v-on:click="artShow(x.imgId)" ></img>
				</div>
				<div class='b2'>
					<div class='c1'>
						<div v-for="(x,k) in bn" v-on:click="bni=k" class='d1'></div>
					</div>
				</div><i v-on:click="bni--;
				if (v.bni<0) {v.bni=v.bn.length-1;}" class='b3'></i><i v-on:click="bni++;
				if (v.bn.length==v.bni) {v.bni=0;}" class='b4'></i></div>


				<div v-bind:style="scroll" class='a3' id="a3">
					<div class='b1'>
						<div class='c1' v-bind:style="{width:typey}">
							<div v-for="x,k in typemenu" v-on:click="typemenui=k;num=6;zixun(x.cId,stmp,0,1)" class='d1'>
								<div  v-bind:style="typemenustyle[k]" class='e1' >{{x.cName}}</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class='a4'></div>
				
				<div v-for="x in content" class='a5'   v-on:click="artShow2(x.artId)" >
					<div class='b1'>
						<div class='c1'><img v-bind:src="'http://192.168.1.125/shiro///imgs/'+x.artUrl" class='d1'></img>
						</div>
						<div class='c2'>
							<div class='d1'>
								<div class='e1'>{{x.artTitle}}</div>
								<div class='e2'>{{x.artAbstracts}}...</div>
								<div class='e3'>{{x.artTime}}</div>
							</div>
						</div>
					</div>
					
				</div>
				
			</div>
			
		</div>
			
				
				<div style="margin-top:10px;">&nbsp;</div>
				<center>
				<table style="margin-bottom: 10px; text-align: center; display:none;" id="tb">
					<tr>
						<td style=" width: 80px; " ><hr align="center" style="height: 1px;width: 85px; border:none;border-top:-1px solid #666; " /></td>
						<td style=" width: 120px;"><div style="font-size:14px;  margin-bottom: 2px; color:#666; " id="a6"> </div></td>
						<td style=" width: 80px; "><hr style="height: 1px;width: 85px; border:none;border-top:-1px solid #666;" /></td>

					</tr>
				</table>
				</center>
				
				
		<script type="text/javascript">
		var cId =null;
		var obj = null;
		var yid = null;
		/*控制分类栏长度*/
			$.getJSON({
				//url:"http://127.0.0.1:80/shiro/beforeShow/articlesMenu",
					url:"http://192.168.1.125:80/shiro/beforeShow/articlesMenu",
					 success:(result)=>{
					 	obj = eval("("+result.data+")");
					 	var w = 72*obj.length+20;
					 	v.typemenu=obj;
					 	if(obj != null){
					 		v.typey=w+"px"; 
					 	}						
					 	cId = v.typemenu[0].cId;

					 }
					});

			var v = new Vue({
				el: "#id945",

				data: {
					typey:"760px",
					scrolltop: 0,
					offsetheight: 0,
					aa: 5,
					search: '',
					bn: [],
					bni: -1,
					typemenu: [],
					typemenui: 0,
					content: []
				},
				computed: {
					scroll: function() {
						var a = {};
						if(this.scrolltop < 145) {
							a = {}
						} else {
							a = {
								position: 'fixed',
								top: '0px'
							}
						}

						var b = $(document).height() - this.scrolltop;
						if(b < 700) {
						
							if(!window.uici) {
								uici = 1;
							}

							
							if(num<=6 ){  //num =6;
								if(uici<=AllPage){
									zixun(cId,stmp,uici++,2); //uici =1;	

								}
								
							}
								
							
						}

						return a
					},
					typemenustyle: function() {
						var a = {};
						a[this.typemenui] = {
							color: '#ffffff',
							background: '#00acff'
						};
						return a;
					}
				},
				methods: {
					play: function(z) {
						v.bni++;
						if(v.bn.length == v.bni) {
							v.bni = 0;
						}
						setTimeout("v.play()", 3000);
					}
				}
			});

			//获取轮播图
				$.getJSON({
					//url:"http://127.0.0.1:80/shiro/beforeShow/selectShufflingImgAll",
							url:"http://192.168.1.125:80/shiro/beforeShow/selectShufflingImgAll",
						success:(result)=>{
							var obj = eval("("+result.data+")");
							v.bn=obj;
							 getmenu();
						}
					});

			v.play();

			//获取分类
			function getmenu(){
			$.getJSON({
				//url:"http://127.0.0.1:80/shiro/beforeShow/articlesMenu",
					url:"http://192.168.1.125:80/shiro/beforeShow/articlesMenu",
					 success:(result)=>{
					 	v.typemenu=obj;
					 	zixun(v.typemenu[0].cId,stmp,0,2);// id=35,page=0;
					 	$("#tb").show();
					 	AllPage=getpageAll(v.typemenu[0].cId,stmp);
	 						
					 }
					});
			}

			

			//通过分类id查找咨询
			function zixun(id,stmp,page,isclick){
				$.getJSON({
					//url:"http://127.0.0.1:80/shiro/beforeShow/selectCIdPaging?artCid="+id+"&stmp="+6+"&page="+page,
						 url:"http://192.168.1.125:80/shiro/beforeShow/selectCIdPaging?artCid="+id+"&stmp="+stmp+"&page="+page,//35,6,0
						success:(result)=>{

							

							var obj = eval("("+result.data+")");
							if(obj.length == 0){
								$("#a6").text("空空如也");
							}else{
								$("#a6").text("我可是有底线的");
							}
							num=obj.length;
							if(isclick == 1){
							
								AllPage=getpageAll(id,stmp);
								v.content=[];

							}
							
							
							if(null == yid) { //yid=35 

								yid = id;
								for (x in obj) {
									v.content.push(obj[x]);
								}
							}else{

								if (yid != id) { // faluse
								uici = 0 ;
								v.content=[];
								v.content=obj;
								yid = id;
							}else{
							
								for (x in obj) {
									v.content.push(obj[x]);
								}
								
							}


							}
							
													
						}
					});
			}

			//根据id获取总页数
			function getpageAll(cid,stmp){
					$.getJSON({
				//url:"http://127.0.0.1:80/shiro/beforeShow/selectShufflingImgAll",
				url:"http://192.168.1.125:80/shiro/beforeShow/getAllPage?artCid="+cid+"&stmp="+stmp,
				success:(result)=>{
					var obj = eval("("+result.data+")");
					 AllPage=obj;
					 AllPage = AllPage -1 ;
				}
		});

			}


			//城市下拉
			$("#home-city").cityPicker({
				title: "选择城市",
				showDistrict: false,
				onChange: function (picker, values, displayValues) {
				//console.log(values[1], displayValues[1]);
				hidefun();
				$(this).text(displayValues[1]);
			}
		});

			//进入搜索
			$("#search").focus(function(){
			     hidefun();
			});

			function hidefun(){
 				$("#a2").hide();
				$("#a3").hide();
				$(".a5").hide();
				$("#tb").hide();
				$(".id945 .a1").css("padding-top","10px");
				$('.id945 .a1 .b3 :after').css('content',' ');  
				$(".id945 .a1 .b3").text('取消').css({"font-size":"14px","font-weight":"bold"});
			    $(".a1 .b3").addClass("backlicle");
			  	$(".backlicle").click(function(){
					location="http://192.168.1.125:80/newsHome/index.html";
				});

			}
			
			//搜索图标点击事件
			$(".search_img").click(function(){

				var info = $("#home-city").text();
				if("城市" == info){
					info = "";
				}
				var  searchVal = $("#search").val();
				if("" == info  && "" ==searchVal){
					$("#search").blur();
					layer.msg("搜索内容不能为空！",{time:600});
					return;
				}

      			likeSelect(searchVal,info);
   		 });


			//监控手机回车键
			$("#id945").bind("keypress",function(e){  
		        // 兼容FF和IE和Opera      
		    var theEvent = e || window.event;      
		    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;      
		    if (code == 13) {                    
		        e.preventDefault();      
		       //回车执行查询  
		      var info = $("#home-city").text();
		        if("城市" == info){
		            info = "";
		        }
		        var  searchVal = $("#search").val();
				if("" == info  && "" ==searchVal){
				$("#search").blur(); 
				layer.msg("搜索内容不能为空！",{time:600});
				
					return;
				}
				likeSelect(searchVal,info);

					
		    }   
		});  

	
	//模糊查询
	function likeSelect(searchVal,info){

		  $.getJSON({
                    url:"http://192.168.1.125:80/shiro/beforeShow/selectLike/",
                    data:{"artTitle":searchVal,
						  "cityName":info },
					type:"post",

                    success:(result)=>{
                    	 var obj = eval("("+result.data+")");
						if(obj == null){
						//v.content=[];
						$("#search").blur();
						layer.msg("未查询到内容！",{time:600});
						return;
						}
						   v.content=[];
						 
						  for (x in obj) {
							v.content.push(obj[x]);
							}
						$("#search").blur();
						$(".a5").show();
				   		
                    }
                });
	} 
//跳转到文章页面
	function artShow(id){ 
		if(id == " "){
			return;
		}
		
		$.post({
                    url:"http://192.168.1.125:80/shiro/beforeShow/selectArtId",
                    data:{"imgId":id},
                    success:(result)=>{
						location.href="http://192.168.1.125/newsHome/detail.html?artId="+result;
                    }
                });
     }

     function artShow2(id){ 
			location.href="http://192.168.1.125/newsHome/detail.html?artId="+id;     
     }

</script>
</body>

</html>